import React, {
  Component
} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  InteractionManager,
  ScrollView
} from 'react-native';
import {
  Container,
  Header,
  Title,
  Button,
  Content
} from 'native-base';
import {
  Col,
  Row,
  Grid
} from 'react-native-easy-grid';
var {
  height,
  width
} = Dimensions.get('window');
import ScrollableTabView from 'react-native-scrollable-tab-view';
import ScrollableTabBar from '../components/ScrollableTabBar'
import NavigationBar from 'react-native-navbar';
import Icon from 'react-native-vector-icons/FontAwesome';
import SlideBox from '../components/SlideBox';
const items = [{
  title: 'And simple',
  img: 'https://img.alicdn.com/tps/TB1QRxaNpXXXXXOapXXXXXXXXXX-520-280.jpg'
}];
//组件开始
class Category extends Component {
  constructor(props) {
    super(props);
    this.state = {};

  }



  render() {
    return (

      <View style={{ flex: 1,paddingBottom: 50}}>
        <NavigationBar
          tintColor='#ff5001'
          statusBar={{style:'light-content'}}
          title={{ title: '即刻商城', tintColor:'#fff'}}
          leftButton={<Icon name="home" color="#fff" size={20} style={{alignSelf:'center',marginLeft: 8}} />}
          rightButton={<Icon name="server" color="#fff" size={20} style={{alignSelf:'center',marginRight: 8}} />} 
        />
         <ScrollableTabView
                      style={{flex:1,}}
                      initialPage={0}
                      renderTabBar={() => <ScrollableTabBar underlineStyle={{backgroundColor:'#ff5001',height:2}} textStyle={{ fontSize: 13,}} tabStyle={{height:35,paddingLeft:15,paddingRight:15}} style={{height:38,}}/>}
                    tabBarBackgroundColor = "#fcfcfc"
                    tabBarActiveTextColor="#ff5001"
                    tabBarInactiveTextColor="#333"
                    
                    >

                     <ScrollView tabLabel='女装'>
                     <View style={{margin:10,}}>
    <SlideBox height={150} width={width-20} items={items}/>
                     </View>

              <View style={{flexWrap:'wrap',flexDirection:'row',justifyContent:'flex-start',paddingLeft:10}}>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>

              </View>


            </ScrollView>
    <ScrollView tabLabel='男装'>
              <View style={{margin:10,}}>
    <SlideBox height={150} width={width-20} items={items}/>
                     </View>

              <View style={{flexWrap:'wrap',flexDirection:'row',justifyContent:'flex-start',paddingLeft:10}}>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>
                <View style={styles.item}>
                  <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
                   <View style={{flex:1,justifyContent:'center',alignItems:'center',}}>
                    <Text numberOfLines={1} style={{fontSize:12,color:'#000'}}>山地自行车</Text>
                   </View>
                </View>

              </View>

            </ScrollView>
                <ScrollView tabLabel='鞋靴'>
              <Text>鞋靴</Text>
            </ScrollView>
                <ScrollView tabLabel='箱包'>
              <Text>箱包</Text>
            </ScrollView>
                <ScrollView tabLabel='内衣配件'>
              <Text>内衣配件</Text>
            </ScrollView>
                <ScrollView tabLabel='手机数码'>
              <Text>手机数码</Text>
            </ScrollView>

                    </ScrollableTabView>
      </View>

    );
  }
}

//样式表
const styles = StyleSheet.create({
  description: {
    fontSize: 20,
  },
  container: {
    flex: 1,
  },
  content: {
    paddingTop: 0,
    marginTop: 0,
    top: 0
  },
  item: {
    width: (width - 40) / 3,
    height: (width - 40) / 3 + 21,
    marginRight: 10,
    backgroundColor: '#fff',
    marginBottom: 10
  },
  img: {
    width: (width - 40) / 3,
    height: (width - 40) / 3,
  },
});

export default Category;